<template>
    <div class="history_header">
     <mt-header title="历史价格查询">
       <router-link to="/home" slot="left">
             <mt-button icon="back">返回</mt-button>
       </router-link>
        <!-- <mt-button icon="more" slot="right"></mt-button> -->
     </mt-header>
     <h4 class="navigation">商品链接</h4>
     <input type="text" class="proposal" placeholder="复制商品链接" v-model="link_main">
     <div class="two_botton">
        <input type="button" value="查询历史价格" class="btn_circle" @click="ff">
        <input type="button" value="重置" @click="reset" class="btn_circle">
     </div>
     <div class="tips_information">
       <p class="catalog">两步操作即可识别商品真假促销</p>
       <p>1.打开购物APP（如手机淘宝）复制商品链接</p>
       <p>2.打开慢慢买APP，系统自动识别查历史价</p>
     </div>
    </div>
</template>
<style lang="less">
    .history_header{
      background-color: #fff;
      position: relative;
      z-index: 99;
      // height: 100%;
      margin-top: -39px;
      width: 100%;
      max-height: 340px;
      overflow: hidden;
      .mint-header{
           background-color: #ff8b00;
           height: 44px;
      }
      .proposal{
        font-size: 13px;
        width: 100%;
        border: none;
        border-bottom: 1px solid #ddd;
      }
      .two_botton{
        width: 100%;
        // display: flex;
        text-align: center;
        margin-bottom: 100px;
        // justify-items: center;
        .btn_circle{
          border-radius: 20px;
        }
      }
      .tips_information{
        font-size: 14px;
        width: 100%;
        >p{
          width: 100%;
          padding-left: 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .catalog{
          color: black;
        }
      }
      .navigation{
        width: 100%;
        padding-left: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
      }
    }
</style>
<script>
import { Toast } from 'mint-ui';
export default {
    data() {
      return {
        link_main:""
      }
    },
    created(){
       this.scrollTop();
    },
    methods:{
      reset(){
        this.link_main = "";
      },
      ff(){
        Toast({
              message: 'loading...',
              position: 'center',
              duration: 3000,
              iconClass: 'mui-icon mui-icon-spinner mui-spin'
        });
      },
      scrollTop(){
        window.scrollTo(0,0);
      }
    }
}
</script>
